<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="text" id="search">
    <div id="content" style="height: 150px;line-height: 150px;text-align: center; color: #000;background-color: #ccc;"></div>
</body>
<script>
    let num  = 1 
    function count(){
        console.log("开始发送查询请求。。。");
        content.innerHTML = num ++
    }
    let search = document.getElementById("search")
    let content = document.getElementById("content");
    // content.onclick= 
    //防抖 
// 触发高频事件后n秒内函数再执行，如果n秒内事件再次被触发，则重新计算时间:
    function debounce(func, wait){
        let timeout;
        return function(){
            if(timeout) clearTimeout(timeout);
            timeout = setTimeout(()=>{
                // func();  // 直接执行函数， 作用域问题
                func.apply(this,arguments); // 指定作用域 
                // func.call(this); // 指定作用域 
                //apply()方法适用于传入第二个参数是有序且参数不定的就使用apply方法，比如函数的arguments这个类数组对象就很适合作为参数传递。
                
                //  apply() 和 call（）的区别

                // 1.第一个参数都是要把this修改成的对象
                // 2.当函数需要参数的时候，那么apply是用数组进行参数的传递
                // 3.而call是使用单个的参数进行传递
            },wait)
        }
    }


    //节流 throttle 总是在1s内后才执行一次
    function throttle (func,wait){
        let timeout;
        return function(){
            if(!timeout){
                timeout = setTimeout(()=>{
                    timeout = null;
                    func();
                },wait)
            }
        }
    }
    // 固定时间  时间戳
    function throttle2 (func,wait){
        let pre = 0;
        return function(){
            let now = Date.now(); //当前时间
            if(now - pre >wait){
                func.apply(this,arguments)
                // 重置 pre
                pre = now 
            }
        }
    }
    // content.onclick = throttle2(count, 1000)
    //高频事件触发，但在N秒内只会执行一次，所以节流会稀释函数的执行频率
    search.onkeyup = debounce(count, 2000)
</script>
</html>